<template>
	<!-- <app-layout class=""> -->
	<view class="con-box" style="overflow-x: hidden;">
		<!-- :style="{'background-image':'url('+imglist+')'}" -->
		<view class="" style="height: 260rpx;" :style="{'margin-top': navHeight+'px'}">
			<view class="" style="position: relative; top: 10%; left: 80%; display: inline; z-index: 1;" @click="changeBgPic" v-if="isminema"
				>
				更换背景
			</view>
			<image :src="imglist" class="bgimage" style="width: 100%;position: absolute;top:0rpx ;left: 0;z-index: 0; height: 560rpx;" @click="lookImage(imglist)">
			</image>
			<view class="rota">
				<swiper style="height: 72rpx;" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
					:vertical="true">
					<swiper-item v-for="(item,index) in avaterimg" :key="index">
						<view class="swiper-item cross-center">
							<image class="imgag" :src="item.useravatar" mode=""></image>
							{{ item.username }}
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="rota" style="z-index: 100;background: none;" :style="{top:'calc('+navHeight+'px + 24rpx)'}">
			</view> -->
			<!-- <修改背景 -->

		</view>
		<!-- <view class="" style="height: 260rpx;position: relative;">
				<image :src="imglist" mode="widthFix" style="width: 100%;">
				</image>
			</view> -->
		<view class="con-info" >
			<!-- 个人信息 -->
			<view class="info-inner" >
				<view class="info-avatar">
					<image :src="leaderInfo.userInfo.avatar" mode=""></image>
				</view>
				<view class="info-some" style="flex: 1;">
					<view class="info-name">
						{{leaderInfo.nickname}}
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<!-- <view class="reatime">
					<view class="text-orange"></view>
					<view class="action">
						2020.02.27
					</view>
				</view> -->
			<view class="rea-solitaire" v-for="(item, index) in list" :key="index">
				<view class="rea-soitem">
					<view class="publisher">
						<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
						<view class="content">
							<view>{{ item.user.nickname }}</view>
							<view class="create-time">{{ item.created_at }}</view>
						</view>
					</view>
					<view class="rea-content">
						{{ item.content }}
						<image class="b-image" v-if="item.pic" :src="item.pic" mode="widthFix"></image>
					</view>

					<!-- <view v-if="item.comts.length" class="solitaireor">
							<view class="so-item" v-for="(order, ord_in) in item.comts" :key="ord_in">
								<image class="so-avatar" :src="item.user.userInfo.avatar" mode=""></image>
								<view class="so-content">
									<view class="">{{ order.user.nickname }}</view>
									<view class="">+1</view>
								</view>
							</view>
						</view>
		
						<view v-else class="soli-else">
							一大波人正在赶来...
						</view> -->
					<view class="btn-z dir-left-nowrap main-between" v-if="isminema">
						<view class="back-btn red-btn" @click="solit(item.id,true)">
							查看详情
						</view>
						<view class="back-btn redback-btn" @click="delsolitaire(item)">
							删除
						</view>
					</view>
					<view v-else class="rea-btn" @click="solit(item.id,false)">
						我要接龙
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- </app-layout> -->
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import uploadFile from "../../../core/upload.js"
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	import solTabBar from '../components/sol-tab-bar.vue'
	export default {
		components: {
			uPopup,
			solTabBar
		},
		
		data() {
			return {
				page: 1,
				page_count: 1,
				lauser_id: 0,
				distrid: 0,
				show: true,
				isCard: false,
				mchid: 0,
				partner_id: 0, // 事业合伙人（绑定群主）
				list: [],
				isminema: false, // 是否自己管理
				userid: 0,
				lists: [
					/* {
					id: 24,
					openid: {
						id: 2,
						nickName: '你猜',
						avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						realname: null,
						tel: null,
						address: '',
					},
					buy_date: 'NULL ',
					pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png',
					content: '大家好，互助下单，疫情之下，邻里和睦',
					is_send: 1,
					is_master: 0,
					comts: [
						// {
						// 	id: 33,
						// 	openid: {
						// 		id: 4,
						// 		nickName: '你猜',
						// 		avatarUrl: 'https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/2lZ9GXssnuO2Bhic4KS0FM03iaah67mkldq864ncskg38mlULmNvON2yVgTOm2oMyHFQNYzrrmeUF7Dvl0OBFv2w\/132',
						// 		realname: null,
						// 		tel: null,
						// 		address: '',
						// 	},
						// 	jl_id: '24',
						// 	address: '2。201',
						// 	name: '你猜',
						// 	tel: '',
						// 	order_status: '0',
						// 	des: '快递在小区门口谢谢'
						// },
						// {
						// 	id: 32,
						// 	openid: {
						// 		id: 2,
						// 		nickName: '你猜',
						// 		avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						// 		realname: null,
						// 		tel: null,
						// 	},
						// 	jl_id: '24',
						// 	address: '1-922',
						// 	name: '你猜',
						// 	tel: '',
						// 	order_status: '0',
						// 	des: ''
						// }
					],
					my_orders: [],
					total_orders: 2,
					create_time: '1998-09-01'
				}, */
				],

				imglist: '',
				leaderInfo: '',
				mcha:0,
				avaterimg: []
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('iPhoneX', {
				botNavHei: 'getNavHei',
			})
		},
		onShareAppMessage() {
			let spath = '/plugins/mch_solitaire/solist/solist?mch_id=' + this.mch_id + '&ismineso=0' +
				'&lauser_id=' + this.lauser_id + '&partner_id=' + this.partner_id
			if (this.distrid) {
				spath = '/plugins/mch_solitaire/solist/solist?mch_id=' + this.mch_id + '&ismineso=0' +
					'&lauser_id=' + this.lauser_id + '&partner_id=' + this.partner_id + '&agent_distrid=' + this.distrid
			}

			return {
				title: this.leaderInfo.nickname,
				path: spath
			}
		},
		/* onShow() {
			const self = this;
			if (self.mch_id != 0) {
				self.$showLoading();
				self.$request({
					url: self.$apiSol.mch.manage_index,
					data: {
						mch_id: self.mch_id
					}
				}).then(info => {
					self.$hideLoading();
					if (info.code === 0) {
						const detail = info.data.detail;
						if (detail.status === '0') {
							uni.showModal({
								title: '提示',
								content: '该用户已不发货！请勿在此下单',
								showCancel: false,
								success: function(e) {

								}
							});
						}
						self.detail = detail;
					}
				});
			}
		}, */
		onLoad(options) {
			console.log(options);
			const self = this;
			self.getUserId()
			// console.log("");
			self.mch_id = options.mch_id || 0
			self.partner_id = options.partner_id || 0
			self.lauser_id = options.lauser_id || 0
			self.distrid = options.distrid || 0
			self.mcha = options.mcha || 0
			if (options.agent_distrid) {
				self.agent_distrid = options.agent_distrid
				self.$store.dispatch('user/agent_distrid', self.agent_distrid)
			}


			// console.log(options.ismineso);
			self.isminema = options.ismineso || false
			// console.log(self.isminema);
			// console.log(!self.isminema);
			self.initSoList(options.lauser_id,options.mcha)
			// self.onReq(29)
			self.storeupdown()
			// self.initUserInfo(options.lauser_id)
		},
		onReachBottom() {
			if (this.page_count > this.page) {
				this.page++
				this.initSoList(this.lauser_id,this.mcha)
			}
		},
		onShow() {
			const self = this
			
		},
		watch: {
			leaderInfo(newval, oldval) {
				// console.log("sssssssssssss", newval);
				this.imglist = newval.userInfo.qjl_background
			},
			imglist(newval,oldval){
				if(newval === ""){
					this.onReq(29)
				}else{
					return
				}
			}
		},
		methods: {
			// 查看图片
			lookImage(url){
				console.log("aaaaa" ,url);
				let imgs =[]
				imgs.push(url)
				// console.log(imgs);
				uni.previewImage({
					urls:imgs,
					current:0
				})
			},
			
			// 点击上传图片背景
			
			
			changeBgPic() {
				// this.getUserId()
				
				let self = this;
				// console.log(self.userid,"我是用户的Userid");
				let imagePath = '';
				let fileName = '';
				uni.chooseImage({
					count: 1,
					mediaType: 'image',
					sourceType: ['album'],
					success(res) {
						// 设置更改背景的入参
						// console.log(res);
						imagePath = res.tempFiles[0].path
						// console.log(imagePath);
						fileName = imagePath.substr(imagePath.lastIndexOf('/') + 1)
						uploadFile({
							url: self.$apiSol.upload.file,
							filePath: imagePath,
							fileType: 'image',
							fileName: fileName,
							mch_id: self.mch_id
						}).then(res => {
							console.log("上传接口", res);
							// if(res.statusCode !== 200) return uni.showToast({title:"上传失败"})							
							const a = JSON.parse(res.data)
							
							const data = {
								user_id: self.userid ,
								// mch_id:self.mch_id,
								img: a.data.url,
								// id:self.qjl_id
							}
							console.log(data);
							self.uploadBg(data)
						})
					}
				})
			},
			// 上传背景

			async uploadBg(data) {
				const res = await this.$request({
					url: this.$apiSol.solitaire.background,
					method: 'get',
					data: data
				})
				if (res.msg == '请求失败') return uni.showToast({
					title: "上传失败"
				});
				console.log("上传成功回调", res);
				this.getUserInfo()
			},
			// 重新请求一下详情改变背景色
			// async getBgImg(){
			// 	const res=await this.$request({
			// 			url: this.$apiSol.solitaire.addelxq,
			// 			data: {
			// 				type: 1,
			// 				id: this.qjl_id,
			// 			}
			// 	})
			// 	console.log(",,,,,,,,,,,",res);
			// 	this.imglist=res.data.list.background_img;
			// },

			// 获取用户信息
			async getUserInfo() {
				const res = await this.$request({
					url: this.$apiSol.user.user_info,
					method: 'get'
				})
				// console.log("bbbbbbbbbb", res);
				this.userid = res.data.agentuser.user_id
				if (res.data.options.qjl_background == '') {
					this.onReq(29)
				} else {
					this.imglist = res.data.options.qjl_background;
				}
			},
			async getUserId() {
				const res = await this.$request({
					url: this.$apiSol.user.user_info,
					method: 'get'
				})
				// options
				this.userid = res.data.options.user_id
				console.log("我是获取信息id 方法",res.data);
			},
			storeupdown() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: 1,
						limit: 5,
						review_status: 1,
						keyword: 'random'
					}
				}).then((res) => {
					this.avaterimg = res.data.list
				}).catch(err => {
					// console.log(err);
				})
			},
			onReq(kid) {
				this.$request({
					url: this.$apiSol.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 29) {
						this.imglist = res.data.list[0].icon_url
					}
				}).catch(() => {

				})
			},
			initUserInfo(lauid) {
				let self = this
				self.$request({
					url: self.$apiSol.user.user_info,
					data: {
						id: lauid
					}
				}).then(res => {
					console.log(res);
				});
			},
			initSoList(lauid,mcha) {
				let self = this
				self.$showLoading({
					type: 'global',
					text: '加载中...'
				});
				self.$request({
					url: self.$apiSol.solitaire.list,
					data: {
						user_id: lauid,
						mch_id: mcha,
						page: self.page
					}
				}).then(res => {
					self.$hideLoading()
					console.log(res);
					// self.list = res.data.list
					self.leaderInfo = res.data.userInfo
					self.list = self.page == 1 ? res.data.list : self.list.concat(res.data.list)
					self.list.map((item, index) => {
						let dArr = []
						dArr = item.detail.split('<').filter((item, index) => {
							return item.indexOf('img') != -1 && item.indexOf(
								'wechat.shuangxitang.cn/web/statics/img/app/app_admin/line.png'
							) == -1
						})
						let kainum, jienum = 0
						if (dArr.length > 0) {
							kainum = dArr[0].match('https').index
							jienum = dArr[0].match('"/>').index
							item.pic = dArr[0].slice(kainum, jienum)
						}
					})
					self.page_count = res.data.pagination.page_count
					// self.souserlist = res.data.list
					// self.pagecount = res.data.pagination.page_count
					// self.totalcount = res.data.pagination.total_count
				}).catch(() => {
					self.$hideLoading()
				})
			},
			jump(url) {
				let aurl = url
				if (aurl.indexOf('?') == -1) {
					aurl = aurl + '?mch_id=' + this.mchid
				} else {
					aurl = aurl + '&mch_id=' + this.mchid
				}
				uni.navigateTo({
					url: aurl
				})
			},
			solit(item, isonlykan) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/solitaire/solitaire?qjl_id=' + item + '&isonlykan=' + isonlykan +
						'&distrid=' + this.distrid
				})
			},
			delsolitaire(item) {
				let self = this
				uni.showModal({
					title: '是否删除本条接龙',
					content: '删除后不可找回，是否确认删除' + item.title,
					success: (res) => {
						self.$request({
							url: self.$apiSol.solitaire.addelxq + '&type=del',
							method: 'post',
							data: {
								id: item.id
							}
						}).then(res => {
							if (res.data == true) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								self.list = self.list.filter((litem, index) => {
									return litem.id != item.id
								})
							} else {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						});
					},
					fail() {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				})
			},
			tososet() {
				uni.navigateTo({
					// url: '/plugins/solitaire/setting/setting' + '?mch_id=' + this.mchid
					url: '/plugins/mch_solitaire/mch/config/config' + '?mch_id=' + this.mchid
				})
			},
			tomchlogin() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/mch/login/login'
				})
			},
			tomchlogout() {
				uni.removeStorage({
					key: 'MCHsxt'
				});
				this.isloginmch = false
				this.mchid = 0
			}
		}
	}
</script>

<style scoped lang="scss">
	.model {
		background-color: #c7b47a;
		color: #FFFFFF;
		padding: 36rpx;
		width: 702rpx;
		border-radius: 14rpx;
		// text-align: center;
	}

	.con-box {
		width: 100%;
		// padding: 0 24rpx;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.rota {
		position: absolute;
		top: 24rpx;
		left: 24rpx;
		width: 300rpx;
		height: 72rpx;
		z-index: 0;
		background: rgba(0, 0, 0, 0.5);
		font-size: 24rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 50rpx;
		box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		padding: 0 24rpx;

		opacity: .6;
		color: #FFFFFF;

		.imgag {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50rpx;
			margin: 0 12rpx;
		}
	}

	.con-info {
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		padding: 56rpx 24rpx 24rpx;
		display: grid;		
		.info-inner {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
			display: flex;
			align-items: center;
			z-index: 2;
			.info-avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				border: 6rpx solid #f9f9f9;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info-some {
				margin-left: 32rpx;

				.info-name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.info-set {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #888888;
				}
			}
		}
	}

	.all-box {
		// width: 702rpx;
		// margin: 0 auto;
		width: 100%;
		padding: 24rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;

		.cla-item {
			padding: 0 24rpx;
		}
	}

	.rea-btn {
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: $uni-bgcolor;
		border-radius: 72rpx;
		margin: 24rpx auto;
	}

	.launch-so {
		// padding: 0 24rpx;
		width: 702rpx;
	}

	.reatime {
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;

		.text-orange {
			display: inline-block;
			background: #f37b1d;
			width: 8rpx;
			height: 28rpx;
		}

		.action {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.rea-solitaire {
		padding: 24rpx;

		.rea-soitem {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
		}

		.rea-content {
			font-size: 28rpx;

			.b-image {
				width: 100%;
				height: 300rpx;
			}
		}

		.rea-btn {
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: $uni-bgcolor;
			border-radius: 72rpx;
			margin: 24rpx auto;
		}

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			background-color: #ffffff;
			align-items: center;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
				padding-left: 24rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.solitaireor {
		font-size: 28rpx;

		.so-item {
			display: flex;
			align-items: center;

			.so-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.so-content {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
	}

	.soli-else {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		line-height: 60rpx;
	}

	.btn-z {
		margin-top: 32rpx;
	}

	.back-btn {
		width: 320rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-radius: 0;
		text-align: center;
		font-size: 28rpx;
	}

	.red-btn {
		padding: 0;
		margin: 0;
		background: $uni-bgcolor;
		color: #FFF;
	}

	.redback-btn {
		color: $uni-bgcolor;
		border: 1rpx solid $uni-bgcolor;
	}
</style>
